<template>
  <div style="width: 100%">
    <div class="flex" style="flex-wrap: wrap; align-items: flex-start">
      <slot name="searchLeft"></slot>
      <template v-for="(item, index) in setSearchTableData">
        <div v-if="item.searchMode == '输入框'" class="flex margin-botpad">
          <div v-if="item.columnName" class="label">{{ item.columnName }}</div>
          <div>
            <el-input
              v-model="inputs[index].value"
              :style="{ width: item.width ? item.width : '240px' }"
              :placeholder="item.columnName ? `请输入${item.columnName}` : `请输入`"
            />
          </div>
        </div>
        <div v-else-if="item.searchMode == '选择框'" class="flex margin-botpad">
          <div v-if="item.columnName" class="label">{{ item.columnName + '' }}</div>
          <el-select v-model="inputs[index].value" :placeholder="'请选择' + item.columnName" style="width: 240px"
                     filterable>
            <el-option v-for="result in item.data" :key="result.value" :label="result.label" :value="result.value"
            />
          </el-select>
        </div>
        <!--          <div v-else-if="item.type == 'data'" class="flex margin-botpad">-->
        <!--            <div v-if="item.label" class="label">{{ item.label }}</div>-->
        <!--            <el-config-provider :locale="zhCn">-->
        <!--              <el-date-picker-->
        <!--                v-model="inputs[index].value"-->
        <!--                type="date"-->
        <!--                value-format="YYYY-MM-DD"-->
        <!--                :placeholder="'请选择' + item.label"-->
        <!--                :clearable="false"-->
        <!--              />-->
        <!--            </el-config-provider>-->
        <!--          </div>-->
        <div v-else-if="item.searchMode == '日期查询'" class="flex margin-botpad">
          <div v-if="item.columnName" class="label">{{ item.columnName }}</div>
          <el-config-provider :locale="zhCn">
            <el-date-picker
              v-model="inputs[index].value"
              type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              :start-placeholder="`请选择开始${item.columnName}`"
              :end-placeholder="`请选择结束${item.columnName}`"
              :clearable="false"
            />
          </el-config-provider>
        </div>
        <!--          <div v-else-if="item.type == 'datetime'" class="flex margin-botpad">-->
        <!--            <div v-if="item.label" class="label">{{ item.label }}</div>-->
        <!--            <el-config-provider :locale="zhCn">-->
        <!--              <el-date-picker-->
        <!--                v-model="inputs[index].value"-->
        <!--                type="datetime"-->
        <!--                :placeholder="`请选择${item.label}`"-->
        <!--                value-format="YYYY-MM-DD HH:mm:ss"-->
        <!--              />-->
        <!--            </el-config-provider>-->
        <!--          </div>-->
        <div v-else-if="item.searchMode == '日期时间查询'" class="flex margin-botpad">
          <div v-if="item.columnName" class="label">{{ item.columnName }}</div>
          <el-config-provider>
            <el-date-picker
              v-model="inputs[index].value"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="`请选择开始${item.columnName}`"
              :end-placeholder="`请选择结束${item.columnName}`"
            />
          </el-config-provider>
        </div>
        <div style="width: 10px"></div>
      </template>
      <div>
        <slot name="searchRight"></slot>
      </div>
      <slot name="searchMenu">
        <div class="flex" style="margin-left: 10px">
          <el-button type="primary" @click="searchThrow"
          ><el-icon style="margin-right: 5px"><Search /></el-icon>查询</el-button
          >
          <div style="width: 10px"></div>
          <el-button @click="resetSearch"
          ><el-icon style="margin-right: 5px"><RefreshRight /></el-icon>重置</el-button
          >
        </div>
      </slot>
    </div>
    <div style="margin-bottom: 10px">
      <slot name="searchMenuRight"></slot>
    </div>
  </div>
</template>

<script>
import {listData} from "@/api/system/dict/data";

export default {
  name: "search",
  props:{
    setSearchTableData:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return {
      inputs:[]
    }
  },
  created() {
    this.inputs = [];
    this.setSearchTableData.forEach((item) => {
      if(item.searchMode == '选择框'){
        // item.data =
        listData({dictType:item.relevancyDict}).then(res => {
          if(res.code == 200){
            res.rows.forEach(item => {
              item.label = item.dictLabel
              item.value = item.dictValue
            })
            item.data = res.rows
          }
          else{
            item.data = []
          }
          this.$forceUpdate()
        })
      }
      if(item.searchMode == '输入框' || item.searchMode == '选择框'){
        item.value = ''
      }
      else if(item.searchMode == '日期查询' || item.searchMode == '日期时间查询'){
        item.value = ['','']
      }
      this.inputs.push({ type: item.tableName + '.' + item.field, value: item.value });
    });

  },
  methods:{
    searchThrow() {
      this.$emit('throwSearchData', this.inputs);
    },
    //点击了模式二重置
    resetSearch() {
      this.inputs.forEach((item) => {
        if (Array.isArray(item.value)) {
          item.value = [];
        } else {
          item.value = '';
        }
      });
      this.$emit('clearSearchData');
    }
  }
}
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  .label {
    margin-right: 5px;
    color: rgb(96, 98, 102);
    font-size: 14px;
  }
}
.margin-botpad {
  margin-bottom: 15px;
}

.searchOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  width: 15%;
  border: 1px solid #d2cececc;
  border-radius: 20px;
  padding: 0 10px;
}

::v-deep .select-compt .el-select .el-input__wrapper {
  box-shadow: none !important;
}
::v-deep .select-compt .el-select .el-select__wrapper {
  box-shadow: none !important;
}
/* 去除选中时蓝色边框（下面两个都要加上） */
::v-deep .input-compt .el-input .el-input__wrapper {
  box-shadow: none !important;
}
</style>
